<template>
  <div class="app-container">
    <div class="container-module">
      <div class="search-module">
        <el-form
          :inline="true"
          class="search-form"
          size="small"
          ref="searchForm"
          :model="searchForm"
        >
          <div class="flex-between">
            <div>
              <el-form-item
                label="用户id"
                class="search-form-item"
                prop="user_id"
              >
                <el-input
                  clearable
                  placeholder="请输入用户id"
                  v-model="searchForm.user_id"
                >
                </el-input>
              </el-form-item>
              <el-form-item
                label="审核状态"
                class="search-form-item"
                prop="status"
              >
                <el-select
                  clearable
                  v-model="searchForm.audit_status"
                  placeholder="请选择状态"
                >
                  <el-option
                    v-for="item in status"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item
                label="充值方式"
                class="search-form-item"
                prop="status"
              >
                <el-select
                  clearable
                  v-model="searchForm.status"
                  placeholder="请选择状态"
                >
                  <el-option
                    v-for="item in status"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="充值渠道"
                class="search-form-item"
                prop="status"
              >
                <el-select
                  clearable
                  v-model="searchForm.audit_status"
                  placeholder="请选择状态"
                >
                  <el-option
                    v-for="item in status"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="充值时间"
                class="search-form-item"
                prop="time"
              >
                <el-date-picker
                  clearable
                  v-model="searchForm.time"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item> -->
            </div>
            <div class="button-box">
              <el-button
                @click="getListWay"
                type="primary"
                icon="el-icon-search"
                class="inquire-box marginBottom-10"
                >查询</el-button
              >
              <el-button
                icon="el-icon-refresh-left"
                class="reset-box"
                @click="resetForm('searchForm')"
                >重置</el-button
              >
            </div>
          </div>
        </el-form>
      </div>
      <el-divider></el-divider>
      <div class="table-module">
        <div class="table-top flex-end">
          <div class="flex button-box">
            <el-button
              class="reset-box marginRight-10"
              icon="el-icon-download"
              style="height: 30px"
              >下载</el-button
            >
            <el-dropdown trigger="click" :hide-on-click="false">
              <span class="el-dropdown-link">
                <el-button
                  icon="el-icon-s-operation"
                  style="height: 30px"
                ></el-button>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                  <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                    tableTheadOptions[fruit].label
                  }}</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <el-row>
          <el-col>
            <el-table
              v-loading="loading"
              highlight-current-row
              :data="dataList"
              :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }"
              style="width: 100%"
            >
              <el-table-column
                v-for="fruit in tableThead"
                :key="fruit"
                :label="tableTheadOptions[fruit].label"
                :min-width="
                  tableTheadOptions[fruit].width
                    ? tableTheadOptions[fruit].width
                    : '80'
                "
                align="center"
              >
                <template slot-scope="scope">
                  <div v-if="fruit == 'audit_status'">
                    <el-tag v-if="scope.row[fruit] == 0">待审核</el-tag>
                    <el-tag v-else-if="scope.row[fruit] == 1" type="success"
                      >已通过</el-tag
                    >
                    <el-tag v-else type="danger">已驳回</el-tag>
                  </div>
                  <div v-else>
                    {{ scope.row[fruit] }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                prop="address"
                label="操作"
                align="center"
                width="80px"
              >
                <template slot-scope="scope">
                  <el-button
                    style="margin: 5px"
                    type="primary"
                    size="mini"
                    @click="viewDetail(scope.row)"
                  >
                    查看
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col style="text-align: right">
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="searchForm.page"
              :limit.sync="searchForm.count"
              @pagination="getListWay"
            />
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 详情抽屉 -->
    <detail
      ref="detail"
      v-if="ifShowDetail"
      :data="detailObj"
      :detailTitle="detailTitle"
    />
  </div>
</template>
<script>
import { list, audit } from "@/api/finance/index";
import detail from "./detail";
const tableTheadOption = {
  user_id: {
    label: "用户id",
    field: "user_id",
  },
  order_no: {
    label: "订单号",
    field: "order_no",
  },
  amount: {
    label: "充值金额",
    field: "amount",
  },
  audit_status: {
    label: "审核状态",
    field: "audit_status",
  },
  type_name: {
    label: "充值方式",
    field: "type_name",
  },
  created_at: {
    label: "充值时间",
    field: "created_at",
  },
};
const allTableThead = [
  "user_id",
  "order_no",
  "amount",
  "type_name",
  "created_at",
  "audit_status",
];
const defaultTableThead = [
  "created_at",
  "user_id",
  "order_no",
  "amount",
  "type_name",
  "audit_status",
];
export default {
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  components: {
    detail,
  },
  data() {
    return {
      detailTitle: "", //抽屉标题
      // 动态显示表头默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      loading: true, // 列表页面加载
      status: [
        { name: "待审核", id: 0 },
        { name: "已通过", id: 1 },
        { name: "已驳回", id: 2 },
      ],
      searchForm: {
        user_id: "",
        audit_status: "",
        page: 1,
        count: 10,
      },
      dataList: [],
      total: 0,
      ifShowDetail: false, //是否打开详情抽屉
      detailObj: {},
    };
  },
  created() {
    this.getListWay();
  },
  methods: {
    //重置
    resetForm(formName) {
      this.searchForm = {
        user_id: "",
        audit_status: "",
        page: 1,
        count: 10,
      };
      this.$refs[formName].resetFields();
      this.getListWay();
    },
    viewDetail(row) {
      this.detailObj = row;
      console.log(this.detailObj);
      this.detailTitle = "详情";
      this.ifShowDetail = true;
    },
    //打开抽屉
    addDetail(title) {
      this.detailTitle = title;
      this.ifShowDetail = true;
    },
    //关闭抽屉
    closedetail() {
      this.ifShowDetail = false;
      this.getListWay();
    },
    getListWay() {
      this.loading = true;
      list(this.searchForm).then((res) => {
        this.loading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.loading = false;
          return this.$messages.error(res.msg);
        }
        this.dataList = res.data.list;
        this.total = res.data.total;
      });
    },
    resetting() {
      this.searchForm = {
        award_name: "", // 抽奖活动名称
        status: "", // 状态状态：-1过期 1开启 2进行中 3关闭
        page: 1,
        count: 10,
      };
      this.getListWay();
    },
  },
};
</script>
<style lang="scss">
.search-form-item {
  padding-bottom: 10px;
  padding-right: 20px;

  .el-form-item__label {
    font-size: 12px;
    font-weight: 500;
    // width:96px;
  }

  .el-input {
    width: 193px;
  }
  .el-date-editor--datetimerange.el-input__inner {
    width: 335px;
  }
}
</style>
<style lang="scss" scoped>
.marginBottom-10 {
  margin-bottom: 10px;
}

.marginRight-10 {
  margin-right: 10px;
}

.flex {
  display: flex;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

.button-box {
  font-size: 14px;
  text-align: right;
  font-size: 12px;

  .inquire-box {
    background: #1890ff;
    color: #ffffff;
  }

  .reset-box {
    background: #eeeeee;
  }
}

.app-container {
  background: #f3f5f7;

  .container-module {
    background: #fff;
    padding: 20px;
    border-radius: 5px;

    .title-module {
      font-size: 18px;
    }

    .search-module {
      padding-top: 20px;
      display: block;
    }

    .table-module {
      .table-top {
        margin-bottom: 20px;
      }

      .table-num {
        margin-left: 5px;
        background: #f0f0f0;
        width: 35px;
        border-radius: 5px;
      }
    }
  }
}
</style>